<template>
  <div class="links">
    <Top/>
    <!-- 内容 -->
    <div style="width:100%;">
      <el-card class="box-card link_message" >
        <div style="text-align: center;font-size: 40px;font-weight:bold;">加入友链须知</div>
        <div>
          <div style="font-size: 30px;font-weight:bold;">注意事项：</div>
          <p  style="font-size: 26px;margin-left:20px;">网站能长期正常访问(如访问不了了需发邮箱联系我)</p>
          <p  style="font-size: 26px;margin-left:20px;">如需交换友链，请先将本站添加到您的网站中，再根据下面的格式，发邮箱联系我~</p>
          <div style="font-size: 30px;font-weight:bold;">申请格式：</div>
          <p  style="font-size: 26px;margin-left:20px;">博客标题：xxx</p>
          <p  style="font-size: 26px;margin-left:20px;">博客地址：xxx</p>
          <p  style="font-size: 26px;margin-left:20px;">图片：xxx</p>
        </div>
      </el-card>


      <div v-model="BlogLinks" class="grid-content content bg-purple blog_bg ">

        <el-row :gutter="20">
          <el-col :span="12"><div style="margin: 15px 0px 15px 20px;color: blueviolet;font-size:30px;">友情链接</div></el-col>
          <el-col :span="12"><div style="float: right;margin: 10px 20px 0px 0px;font-size:30px;">共
            <span style="font-size: 39px;color: rgb(6, 154, 240);">{{length}}</span> 个</div>
          </el-col>
        </el-row>

        <div style="background-color: #DCDFE6;height: 2px;margin: 5px 0;"></div>

        <!-- 分割线 -->
        <!-- <div  style="height:3px; margin: 5px 0; border:none; border-top:3px solid  #1eb9e0;"></div> -->
        <div style="width: 90%;margin: auto; margin-top: 2%;" v-for="(item,indexLink) in BlogLinks" :key="indexLink">
          <a :href="item.blogAddress" >
            <el-card>
              <el-row :gutter="15">
                <el-col :span="5">
                  <div v-lazy-container="{ selector: 'img' }">
                    <!-- <img :src="item.pictureAddress" width="50" height="50"> -->
<!--                    <el-image-->
<!--                        style="width: 100%; height: 100%"-->
<!--                        :src="item.pictureAddress"-->
<!--                    >-->
<!--                    </el-image>-->
                    <img
                        style="width: 100%; height: 100%"
                        :data-src="item.pictureAddress"
                    />
                  </div>
                </el-col>
                <el-col :span="19">
                  <div>
                    <p style="font-size: 30px;line-height: 0; font-weight:bold;">{{item.blogName}}
                    </p>
                    <p style="font-size: 20px;display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; ">
                      {{item.blogAddress}}
                    </p>
                    <el-tag size="mini"><p style="font-size: 20px;line-height: 0; font-weight: normal;">  {{item.createTime}}</p></el-tag>
                    <!-- <p style="font-size: 10px;line-height: 0;"><el-link style="font-size: 5px;" :underline="false">回复</el-link></p> -->
                  </div>
                </el-col>

              </el-row>
            </el-card>
          </a>
        </div>

      </div>
    </div>
    <!--    <div class="kong"></div>-->
<!--    <Foot class="foot"></Foot>-->
    <!--占位-->
    <div style="height:200px;"></div>
  </div>
</template>

<script>
import Top from '@/components//move/Top'

// import Foot from '@/components/Foot'

export default {
  name: 'BlogLinks',
  components:{ Top },
  data () {
    return {
      BlogLinks:'',
      length: '',
    }
  },
  mounted() {
    this.initLinks()
  },
  methods:{
    initLinks(){
      const _this = this
      this.axios.get('/links/getAllLink').then(resp=>{
        // console.log(resp)
        _this.BlogLinks = resp.data.obj
        _this.length = resp.data.obj.length
      })
    }
  }
}
</script>

<style scoped>
.links{
  min-height: 100vh;
  position: relative;
}

.blog_bg{
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 90%;
  margin-top: 2% !important;
  margin-bottom: 5% !important;
  margin: auto;
  min-height: 500px;
  padding:20px 0;
}

/*@media screen and (max-width: 800px){*/
/*  .blog_bg{*/
/*    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);*/
/*    width: 90%;*/
/*    margin-top: 2% !important;*/
/*    margin-bottom: 5% !important;*/
/*    margin: auto;*/
/*    min-height: 500px;*/
/*    padding:20px 0;*/
/*  }*/
/*  .link_message[data-v-6c380e26]{*/
/*    width:90%;*/
/*    font-size:60px;*/
/*  }*/
/*}*/
.link_message{
  width: 90%;
  margin-top: 2% !important;
  margin: auto;
}

.foot{
  position: absolute;
  bottom: 0;
  left: 0;
  width:100%;
  /*index:999;*/
}

/*.kong{*/
/*  height: 350px;*/
/*}*/
</style>